<template>
  <el-form class="wb-animate">
    <dropdown-normal v-model="animate.triggerType" :valLists="ANIMATE_TRIGGER_TYPE" label="动画触发类型" @change="onUpdateAnimateAttr"></dropdown-normal>
    
    <switch-normal v-model="animate.isGsap" label="开启高级动画" @change="onAddGsapAnimateAttr"></switch-normal>
    
    <template v-if="animate.isGsap">
      <switch-normal v-model="animate.isPathAnimate" label="路径动画" @change="onUpdateIsPathAnimateAttr"></switch-normal>
      <template v-if="animate.isPathAnimate && animate.path">
        <switch-normal label="贝兹曲线" v-model="animate.path.isPathBezier" @change="onUpdatePathAnimateAttr"></switch-normal>
        <template v-if="animate.path.isPathBezier">
          <dropdown-normal v-model="animate.path.type" :valLists="ANIMATE_BEZIER_TYPE" label="贝兹曲线类型" @change="onUpdatePathAnimateAttr"></dropdown-normal>
          <switch-normal label="自动贴合路径旋转" v-model="animate.path.autoRotate" @change="onUpdatePathAnimateAttr"></switch-normal>
        </template>
        <textarea-normal label="关键节点" v-model="animate.path.attrs" placeholder='[{"x":-836,"y":-220,"alpha":1}]' @change="onUpdatePathAnimateAttr"></textarea-normal>
        <input-normal label="控制点曲度" placeholder="弯曲程度，绘制曲线经过点数量" v-model="animate.path.curviness" @change="onUpdatePathAnimateAttr"></input-normal>
      </template>

      <textarea-normal label="缓动参数" v-model="animate.gsap.options" placeholder='{"x":-836,"y":-220,"alpha":1,"rotate":60}' @change="onUpdateGsapAttr"></textarea-normal>
      <input-normal label="缓动时间" placeholder="关键路径时间用，分隔" v-model="animate.gsap.durations" @change="onUpdateGsapAttr"></input-normal>
      <slider-normal label="重复次数" v-model="animate.gsap.repeat" :min="-1" :max="100" :step="1" @change="onUpdateGsapAttr"></slider-normal>
      <dropdown-normal label="缓动类型" :valLists="GSAP_EASE_TYPES" v-model="animate.gsap.ease" @change="onUpdateGsapAttr"></dropdown-normal>
      <dropdown-normal label="缓动出入" :valLists="GSAP_EASE_INOUT_TYPES" v-model="animate.gsap.easeInOut" @change="onUpdateGsapAttr"></dropdown-normal>
      <switch-normal label="yoyo" v-model="animate.gsap.yoyo" @change="onUpdateGsapAttr"></switch-normal>
      <switch-normal label="缓动结束后执行事件" v-model="animate.gsap.isOnComplete" @change="onUpdateGsapAttr"></switch-normal>
      <textarea-normal v-if="animate.gsap.isOnComplete" label="事件参数" v-model="animate.gsap.onCompleteParams" @change="onUpdateGsapAttr"></textarea-normal>
    </template>
    
    <!-- <el-row v-if="animate.isPathAnimate">
      <el-col :span="12" :offset="12">
        <el-button type="primary" style="padding:8px 10px" @click.stop="onOpenEditPathDialog">打开编辑路径</el-button>
      </el-col>
    </el-row> -->
    <el-row>
    </el-row>
    <el-row class="margin-left-right-16">
      <el-button  icon="Plus" type="primary" @click.stop="onAddAnimate">添加动画</el-button>
      <el-button icon="CaretRight" @click.stop="onPlayAll">预览动画</el-button>
    </el-row>
    <el-collapse v-model="activeNames" class="margin-top-10">
      <el-collapse-item v-for="(item, index) in animates" :name="index+1" :key="index">
          <template #title>
          动画{{index+1}}<span class="select-animate" @click.stop="onShowSelectAnimate($event, item, index)">{{item.name}}</span>
          <i class="jy-icon-play margin-left-right-16 margin-left-right-16" @click.stop="onPlayAnimateByIndex($event, index)"></i>
          <i class="jy-icon-delete" @click.stop="onDeleteAnimate($event, index)"></i>
        </template>
        <slider-normal v-model="item.duration" label="时长" :min="0" :max="10" :step="0.1" @change="onUpdateAnimateByIndex(index)"></slider-normal>
        <slider-normal v-model="item.delay" label="延时" :min="0" :max="10" :step="0.1" @change="onUpdateAnimateByIndex(index)"></slider-normal>
        <slider-normal v-model="item.repeat" label="重复次数" :min="0" :max="99" :step="1" @change="onUpdateAnimateByIndex(index)"></slider-normal>
        <!-- <slider-normal v-model="item.opacity" label="透明度" :min="0" :max="1" :step="0.1" @change="onUpdateAnimateByIndex(index)"></slider-normal> -->
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'

import { ANIMATE_TRIGGER_TYPE, ANIMATE_BEZIER_TYPE } from '@/common/const-animates'
import { PathAnimate } from '@/store/default-styles-dom'
import { GSAP_FROM_TYPES, GSAP_EASE_TYPES, GSAP_AXIS_TYPES, GSAP_EASE_INOUT_TYPES } from '@/common/const-animates';

import { EventBus } from '@/store/index'

export default {
  name: "RightAnimate",
  components: {
    SliderNormal,
    DropdownNormal,
    SwitchNormal,
    InputNormal,
    TextareaNormal,
  },
  setup () {
    return {
      activeNames:[1],
      ANIMATE_TRIGGER_TYPE: ANIMATE_TRIGGER_TYPE,
      GSAP_FROM_TYPES: GSAP_FROM_TYPES,
      GSAP_EASE_TYPES: GSAP_EASE_TYPES,
      GSAP_EASE_INOUT_TYPES: GSAP_EASE_INOUT_TYPES,
      GSAP_AXIS_TYPES: GSAP_AXIS_TYPES,
      ANIMATE_BEZIER_TYPE: ANIMATE_BEZIER_TYPE,
    }
  },
  computed: {
    ...mapState("components", {
      animate: state => _.cloneDeep(state.currentComponentData.animate),
      componentData: (state) => state.currentComponentData,
    }),
    animates(){
      return this.animate.animates;
    }
  },
  methods: {
    ...mapActions({
      addAnimate: "components/addAnimate",
      deleteAnimate: "components/deleteAnimate",
      updateAnimateIndex: "components/updateAnimateIndex",
      playAnimateAll: "components/playAnimateAll",
      updateAnimateByIndex: "components/updateAnimateByIndex",
      changeSelectAnimatePlane: "changeSelectAnimatePlane",
      setEditPathAimate: "setEditPathAimate",
    }),
    onUpdateAnimateAttr(){
      this.updateAnimateByIndex( { triggerType: this.animate.triggerType } );
    },
    onUpdateIsPathAnimateAttr(){
      this.$store.commit('components/updatePathAnimateAttr', { isPathAnimate: this.animate.isPathAnimate });
    },
    onAddGsapAnimateAttr(){
      this.$store.commit('components/updatePathAnimateAttr', { isGsap: this.animate.isGsap });
      if(this.animate.isGsap){
        const data = _.cloneDeep(PathAnimate);
        this.$store.commit('components/addPathAnimateAttr', data);
      }
    },
    onUpdatePathAnimateAttr(){
      this.$store.commit('components/updatePathAnimateAttr', { path: this.animate.path });
    },
    onUpdateGsapAttr(){
      this.$store.commit('components/updatePathAnimateAttr', { gsap: this.animate.gsap });
    },
    onAddAnimate(){
      let item = {duration:1, delay:0, repeat:1, sequence:1, opacity: 1, classStr:"flash", name:"闪烁", isPlaying: false};
      this.changeSelectAnimatePlane({isActive: true});
      this.updateAnimateIndex(this.animates.length);
      this.addAnimate(item);
    },
    onDeleteAnimate(e, index){
      e.stopPropagation();
      e.preventDefault();
      this.deleteAnimate(index);
    },
    onPlayAnimateByIndex(e, index){
      e.stopPropagation();
      e.preventDefault();
      let item = this.animates[index];
      item.isPlaying = true;
      let params = {index, item};
      this.updateAnimateByIndex(params);
      this.updateAnimateIndex(index);
      EventBus.$emit("playAnimate");
    },
    onUpdateAnimateByIndex(index){
      let item = this.animates[index];
      let params = {index, item};
      this.updateAnimateByIndex(params);
      this.updateAnimateIndex(index);
    },
    onShowSelectAnimate(e, item, index){
      e.stopPropagation();
      e.preventDefault();
      this.changeSelectAnimatePlane({isActive: true});
      this.updateAnimateIndex(index);
    },
    onPlayAll(){
      this.playAnimateAll(true);//{isPlayAll: true}
      EventBus.$emit("playAnimate");
    },
    onOpenEditPathDialog(){
      let params = { isActive: true };
      this.setEditPathAimate(params);
    },
  },
};
</script>
